<template>
	<view class="music-head" :style="{color: color}">
		<view class="music-head-icon" v-if="icon" :class="{ 'music-head-iconblack': iconblack }">
			<text class="iconfont icon-left" @tap="handleToBack"></text> | <text class="iconfont icon-shouye" @tap="handleToHome"></text>
		</view>
		{{ title }}
	</view>
</template>

<script>
	export default {
		name: "musichead",
		props: {
			title: {
				type: String,
				default: ''
			},
			icon: {
				type: Boolean,
				default: true
			},
			color: {
				type: String,
				default: 'inherit'
			},
			iconblack: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleToBack() {
				uni.navigateBack()
			},
			handleToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
// 小程序的头部使用的是px，为了保持一致，选择使用px单位
.music-head{
	width: 100%;
	height: 75px;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
	color: #000;
	position: relative;
}

.music-head-icon {
	position: absolute;
	left: 8px;
	top: 24px;
	width: 90px;
	height: 30px;

	display: flex;
	justify-content: space-around;
	justify-content: space-evenly; // 剩余空间平均分配，兼容性比较差
	align-items: center;
	height: 30px;
	background: rgba(0, 0, 0, .3);
	border-radius: 30rpx;
	color: #fff;
}

.icon-shouye {
	font-size: 34rpx;
}

.music-head-iconblack { color: black; border: 1px #eaeaea solid; background: white; }
</style>
